<template>
    <div class="appmain">
        <div class="gobastyle">
          <span><i @click="goback"  class="iconfont icon-fanhui"></i></span>
        </div>
        <div class="main-child">
           <div class="txun">能耗总览(kwh)</div>
           <div class="stytr1 common">
              <table class="listTable" border="1">
                <thead class="blue"><tr><th>本楼层能耗</th><th>建筑总能耗</th><th>占比</th></tr></thead>
                <tbody><tr><td>{{onechange}}</td><td>{{twochange}}</td><td>{{percen}}%</td></tr></tbody>
              </table>
           </div>
           <div class="txun addtop">分项能耗</div>
           <div class="stytr2 addtop common">
               <div class="mutually">
                   <div id="onecanvas" style="width: 100%;height: 100%;" ref="mainone"></div>
               </div>
           </div>
           <div class="txun addtop">最近12月能耗趋势</div>
           <div class="stytr3 addtop common">
               <div class="mutually">
                    <div ref="main" style="width:100%;height:100%"></div>
               </div>
           </div>
           <floorChange></floorChange>
       </div>
    </div>
</template>
<script>
var echarts = require("echarts");
import floorChange from "../child/floorChange";
import { debounce } from "../../../utils";
import Vue from "vue";
export default {
  name: "energy",
  data() {
    return {
      chart: null,
      myChart: null,
      baseShow: true,
      turnUpShow: false,
      turnDownShow: false,
      active: null,
      onechange: 56430000,
      twochange: 4223412300,
      percen: null,
    };
  },
  components: {
    floorChange
  },
  computed: {
    chouseFloor() {
      return this.$store.state.threeD.chouseFloor;
    }
  },
  watch: {
    // '$route' (to, from) {
    //   console.log(to,from)
    // }
  },
  mounted() {
    this.initChart();
    this.initChartone();
    this.datacontrol();
    // 宽度变化，echarts自适应--暂无效果：echarts宽度固定
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.myChart.resize();
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHanlder);
  },
  beforeDestroy() {
    // 若 chart 存在，则取消绑定事件
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
    clearInterval(this.startCharts)
  },
  methods: {
    datacontrol() {
      var onechange = 56430000;
      var twochange = 4223412300;
      var oneinterval = setInterval(() => {
        this.onechange = onechange += 3;
        this.twochange = twochange += 19;
        this.percen = ((this.onechange/this.twochange).toFixed(4))*100;
      }, 1000);
    },
    // 返回按钮
    goback() {
      viewBackFromFloorToBudling();
      this.$router.push({ path: "/home/energy" });
    },
    // 图表渲染
    initChartone() {
      // this.chart = echarts.init(this.$refs.mainone);
      let isSet = true
      let _this = this
      this.chart = echarts.init(this.$refs.mainone);
      this.chart.on('mouseover', function (param) {
        clearInterval(_this.startCharts)
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        // 高亮当前图形
        _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
        });
        isSet = false
      })
      this.chart.on('mouseout', function (param) {
        if (!isSet) {
          _this.startCharts = setInterval(chartHover, 2000);
          isSet = true
        }
      })
      var colors = ["#3b9651", "#ffa628", "#ff6661", "#6759be", "#00a0e9"];
      var option = {
        color: colors,
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          fontSize: "13"
        },
        legend: {
          orient: "vertical",
          selectedMode:false,
          right: "20",
          top: "30%",
          textStyle: {
            color: "#fff"
          },
          data: ["照明插座", "空调末端", "消防",'', "动力", "其他"]
        },
        series: [
          {
            name: "分项能耗",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["30%", "50%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "13",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: "照明插座" },
              { value: 310, name: "空调末端" },
              { value: 234, name: "消防" },
              { value: 135, name: "动力" },
              { value: 548, name: "其他" }
            ]
          }
        ]
      };
      //设置series
      this.chart.setOption(option);
      app.currentIndex = -1;

      var chartHover = function(){
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        _this.chart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        // 高亮当前图形
        _this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        // 显示 tooltip
        _this.chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
      }
      // console.log(isSet)
      this.startCharts = setInterval(chartHover, 2000);
    },
    // 图表渲染
    initChart() {
      this.myChart = echarts.init(this.$refs.main);
      this.myChart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: "{a}<br>{b}: {c}kwh"
        },
        grid: {
          top: 35,
          left: 20,
          right: 20,
          bottom: 35
        },
        xAxis: [
          {
            gridIndex: 0,
            type: "category",
            data: [
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月"
            ],
            axisTick: { show: false },
            axisLabel: {
              interval: 2,
              textStyle: {
                color: "#ddd" //坐标值得具体的颜色
              }
            }
          }
        ],
        yAxis: [
          {
            name: "kwh",
            nameLocation: "end",
            nameTextStyle: {
              color: "#fff",
              fontWeight: "normal"
            },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            type: "line",
            valueAxisIndex: 0,
            name: "最近12月能耗趋势",
            data: [
              451354,
              412480,
              436649,
              444987,
              470098,
              490041,
              195486,
              186511,
              143154,
              153485,
              164894,
              312056,
              343484
            ],
            barMaxWidth: 40,
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 1,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(60, 117, 196, 0.75)"
                    },
                    {
                      offset: 1,
                      color: "rgba(60, 117, 196, 0)"
                    }
                  ]
                },
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "rgb(60,117,196)"
              }
            },
            xAxisIndex: 0,
            yAxisIndex: 0
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$colorwhite: white;
$colorblue: #16cdff;
$bordercolor: #172231;
$borderbottom: #10325d;
$iconcolor: #ff6661;
$iconcolor1: #8370fe;
$iconcolor2: #00a0ea;
$iconcolor3: #8370fd;
$iconcolor4: #15cdff;
$mrtop: 13px;
.appmain {
  height: 100%;
  width: 27%;
  // margin-top: 20px;
  min-width: 497px;
  box-sizing: border-box;
  position: absolute;
  right: 20px;
  // background-color: cadetblue;
  .gobastyle {
    width: 40px;
    height: 40px;
    // background-color: salmon;
    position: absolute;
    right: 11%;
    top: 50px;
    .icon-fanhui {
      font-size: 0.3rem;
      color: white;
      position: absolute;
      z-index: 1;
      cursor: pointer;
    }
  }
  .main-child {
    height: 90%;
    width: 100%;
    position: absolute;
    top: 6%;
    padding: 15px;
    .addtop {
      margin-top: $mrtop;
    }
    // 公用样式
    .txun {
       height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left:25px;
      background: url("../../../assets/img/titlebj.png") no-repeat;
      background-size:100% 100%;
      color: $colorwhite;
      font-size: 0.15rem;
    }
    .common {
      width: 94%;
      margin-left: 16px;
      font-size: 15rem;
      color: white;
      background: rgba($color: #000000, $alpha: 0.5);
      margin-top: $mrtop;
      border: 1px solid $bordercolor;
      box-shadow: 0px 0px 7px 3px rgba(22, 64, 117, 0.8) inset;
    }
    .stytr1 {
      height: 20%;
      padding: 8%;
      // width: 100%;
      font-size: 0.15rem;
      table.listTable {
        height: 100%;
        width: 100%;
        border: 1px solid #000;
        border-collapse: collapse;
        thead.blue {
          background: #3b75c0;
          th{
            padding: 2% 0px;
            text-align: center;
          }
        }
        tbody {
          td {
            padding: 2% 0px;
            text-align: center;
            background: rgba(59, 117, 192, 0.34);
          }
        }
      }
    }
    .stytr2 {
      height: 22%;
      .mutually {
        height: 100%;
        width: 100%;
        p {
          margin: 0;
        }
      }
    }
    .stytr3 {
      height: 25%;
      .mutually {
        height: 100%;
        width: 100%;
        p {
          margin: 0;
        }
      }
    }
  }
}
</style>